<!DOCTYPE html>
<html>
<head>
    <title>Hello WebSocket</title>
    <link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="/main.css" rel="stylesheet">
    <script src="/webjars/jquery/jquery.min.js"></script>
    <script src="/webjars/sockjs-client/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/stomp.min.js"></script>
    <script src="/app.js"></script>
</head>
<body>

<div id="main-content" class="container">

<!--    功能键-->
    <div class="row">
        <div class="col-md-6">
            <form class="form-inline">
                <div class="form-group">
                    <label for="connect">链接服务器:</label>
                    <button id="connect" class="btn btn-default" type="submit">上线</button>
                    <button id="disconnect" class="btn btn-default" type="submit" disabled="disabled">下线</button>
                </div>
            </form>
        </div>

        <div class="col-md-6">
            <form class="form-inline">
                <div class="form-group">
                    <label for="name">我的名字</label>
                    <input type="text" id="name" class="form-control" placeholder="Your name here...">
                </div>
            </form>
        </div>
    </div>
    <br>
<!--   功能键结束-->
<!--    ↑   ↓     ← → -->
    <div class="row">

        <div class="col-md-3  col-md-offset-1">

            <div class="row">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <button id="move_up" class="btn btn-default">↑</button><br>
            </div>

            <div class="row">
                <button id="move_left" class="btn btn-default">←</button>
                <button id="move_down" class="btn btn-default">↓</button>
                <button id="move_right" class="btn btn-default">→</button>
            </div>


        </div>

        <div class="col-md-8">

            serverInfo:<div id="server_info"></div>

        </div>

    </div>



<!--   输出区-->
    <div class="row">

        <!--网格区-->

            <table id="gameOut" class="table table-striped">
                <thead>
                <tr>
                    <th>输出</th>
                </tr>
                </thead>


                <table id="gamebox" border="1" cellspacing="0" >

                </table>
            </table>


        <!--网格区结束-->

        <!--位置输出-->
<!--        <div class="col-md-6">-->
<!--            <table id="conversation" class="table table-striped">-->
<!--                <thead>-->
<!--                <tr>-->
<!--                    <th>输出</th>-->
<!--                </tr>-->
<!--                </thead>-->
<!--                <tbody id="greetings">-->
<!--                </tbody>-->
<!--            </table>-->
<!--        </div>-->
        <!--位置输出结束-->


    </div>
<!--    输出区结束-->


</div>

</body>

<style>
    .game_square{
        width: 50px;
        height: 25px;
    }

</style>

</html>

